<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
          name="viewport">
    <meta content="ie=edge" http-equiv="X-UA-Compatible">
    <link href="css/init.css" rel="stylesheet">
    <link href="css/index.css" rel="stylesheet">
    <script src="js/flexible.js"></script>
    <title>网易云音乐</title>
</head>
<body>
<!--头部区域-->
<div class="g-topbar">
    <!-- 上半部分 -->
    <div class="m-topbar">
        <!-- 标题 -->
        <h3>
            <a href="#"></a>
        </h3>
        <!-- 选项栏 -->
        <ul class="clearfix">
            <li class="m-topbar-current"><a href="">
                发现音乐
                <span class="cor"></span>
            </a></li>
            <li><a href="">
                我的音乐
            </a></li>
            <li><a href="">
                朋友
            </a></li>
            <li><a href="">
                商城
            </a></li>
            <li><a href="">
                音乐人
            </a></li>
            <li><a href="">
                下载客户端
                <span class="hot"></span>
            </a></li>
        </ul>
        <!-- 搜索 -->
        <div class="search">
            <input placeholder="音乐/视频/电台/用户" type="text">
        </div>
        <!-- 创作者中心 -->
        <button>创作者中心</button>
        <a href="#">登录</a>
    </div>
    <div class="m-subnav">
        <ul>
            <li>
                <a href="#"><em>推荐</em></a>
            </li>
            <li>
                <a href="#"><em>排行榜</em></a>
            </li>
            <li>
                <a href="#"><em>歌单 <span
                        style="background: url('img/white-r-icon@3x.png') no-repeat; position: absolute;display: block; width: 12px;height: 12px;left: 248px;top: 6px;"></span>
                </em></a>
            </li>
            <li>
                <a href="#"><em>主播电台</em></a>
            </li>
            <li>
                <a href="#"><em>歌手</em></a>
            </li>
            <li>
                <a href="#"><em>新碟上架</em></a>
            </li>
        </ul>
    </div>
</div>
<!--轮播图-->
<div class="n-ban">
    <div class="w">
        <div class="focus fl">
            <!-- 左侧按钮 -->
            <a class="arrow-l" href="javascript:;">&lt;</a>
            <!-- 右侧按钮 -->
            <a class="arrow-r" href="javascript:;">&gt;</a>
            <!-- 核心的滚动区域 -->
            <ul>
                <li>
                    <a href="#"><img alt="" src="img/banner01.jpg"></a>
                </li>
                <li>
                    <a href="#"><img alt="" src="img/banner02.jpg"></a>
                </li>
                <li>
                    <a href="#"><img alt="" src="img/banner03.jpg"></a>
                </li>
                <li>
                    <a href="#"><img alt="" src="img/banner04.jpg"></a>
                </li>
                <li>
                    <a href="#"><img alt="" src="img/banner01.jpg"></a>
                </li>
            </ul>
            <!-- 小圆圈 -->
            <ol class="circle">

            </ol>
        </div>
        <div class="download">
            <a href="#"></a>
            <p>PC 安卓 iPhone WP iPad Mac 六大客户端</p>
        </div>
    </div>
</div>

<!--主体-->
<div class="w">
    <div class="main">
        <div class="main-left">
            <div class="popular-recommendation">
                <div class="popular-recommendation-head">
                    <h4><span>热门推荐</span></h4>
                    <ul>
                        <li><a href="#">华语</a></li>
                        <li></li>
                        <li><a href="#">流行</a></li>
                        <li></li>
                        <li><a href="#">摇滚</a></li>
                        <li></li>
                        <li><a href="#">民谣</a></li>
                        <li></li>
                        <li><a href="#">电子</a></li>
                    </ul>

                    <span><a href="#">更多</a></span>
                </div>
                <div class="popular-recommendation-body">
                    <ul>
                        <li>
                            <img src="img/popular-img01.jpg" alt="中华">
                            <a href="">庆祝中华人民共和国成立72周年|百曲献祖国</a>
                            <div class="popular-recommendation-body-bottom clearfix">
                                <span class="span1"></span>
                                <span class="span2">220万</span>
                                <a href="#"></a>

                            </div>
                        </li>
                        <li>
                            <img src="img/popular-img02.jpg" alt="中华">
                            <a href="">「深度睡眠专用音乐」亲测有效 自我催眠</a>
                            <div class="popular-recommendation-body-bottom clearfix">
                                <span class="span1"></span>
                                <span class="span2">987万</span>
                                <a href="#"></a>

                            </div>
                        </li>
                        <li>
                            <img src="img/popular-img03.jpg" alt="中华">
                            <a href="">时间有限来不及去惦记心里没有我的人.</a>
                            <div class="popular-recommendation-body-bottom clearfix">
                                <span class="span1"></span>
                                <span class="span2">25万</span>
                                <a href="#"></a>

                            </div>
                        </li>
                        <li>
                            <img src="img/popular-img04.jpg" alt="中华">
                            <a href=""> #019丨说到哈利波特，谁还没有一个霍格沃兹的老闺蜜了</a>
                            <div class="popular-recommendation-body-bottom clearfix">
                                <span class="span1"></span>
                                <span class="span2">65413</span>
                                <a href="#"></a>

                            </div>
                        </li>
                        <li>
                            <img src="img/popular-img05.jpg" alt="中华">
                            <a href="">古尔达：巴赫平均律曲集</a>
                            <div class="popular-recommendation-body-bottom clearfix">
                                <span class="span1"></span>
                                <span class="span2">58109</span>
                                <a href="#"></a>

                            </div>
                        </li>
                        <li>
                            <img src="img/popular-img06.jpg" alt="中华">
                            <a href=""> Sunnee杨芸晴来电：那些无法直言的心绪，你听见了吗？</a>
                            <div class="popular-recommendation-body-bottom clearfix">
                                <span class="span1"></span>
                                <span class="span2">14177</span>
                                <a href="#"></a>

                            </div>
                        </li>
                        <li>
                            <img src="img/popular-img07.jpg" alt="中华">
                            <a href="">击杀秀专用，超强代入感</a>
                            <div class="popular-recommendation-body-bottom clearfix">
                                <span class="span1"></span>
                                <span class="span2">45万</span>
                                <a href="#"></a>

                            </div>
                        </li>
                        <li>
                            <img src="img/popular-img08.jpg" alt="中华">
                            <a href=""> 《一起打台球》郭德纲、于谦</a>
                            <div class="popular-recommendation-body-bottom clearfix">
                                <span class="span1"></span>
                                <span class="span2">78500</span>
                                <a href="#"></a>

                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="new-discs-on-shelves">
                <div class="new-discs-on-shelves-head">
                    <h4><span>新碟上架</span></h4>
                    <span>
                        <a href="">更多</a>
                    </span>
                </div>
                <div class="new-discs-on-shelves-body">
                    <div class="new-discs-box">
                        <a href="#" class="new-discs-box-arrow-left"></a>
                        <div>
                            <ul>
                                <li>
                                    <img src="img/new-discs-01.jpg" alt="">
                                    <a href=""></a>
                                    <p>湾区升明月"2021大湾区中秋电影音乐晚会</p>
                                    <span><a href="#">群星</a></span>
                                </li>
                                <li>
                                    <img src="img/new-discs-02.jpg" alt="">
                                    <a href=""></a>
                                    <p>金陵九歌</p>
                                    <span><a href="#">Ice Paper</a></span>
                                </li>
                                <li>
                                    <img src="img/new-discs-03.jpg" alt="">
                                    <a href=""></a>
                                    <p>Certified Lover Boy</p>
                                    <span><a href="#">Drake</a></span>
                                </li>
                                <li>
                                    <img src="img/new-discs-04.jpg" alt="">
                                    <a href=""></a>
                                    <p>Mercury - Act 1</p>
                                    <span><a href="#">Imagine Dragons</a></span>
                                </li>
                                <li>
                                    <img src="img/new-discs-05.jpg" alt="">
                                    <a href=""></a>
                                    <p>值得更好的</p>
                                    <span><a href="#">张杰</a></span>
                                </li>
                            </ul>
                        </div>
                        <a href="#" class="new-discs-box-arrow-right"></a>
                    </div>
                </div>
            </div>
            <div class="list">
                <div class="list-head">
                    <h4><span>榜单</span></h4>
                    <span><a href="">更多</a></span>
                </div>
                <div class="list-body clearfix">
                    <dl>
                        <dt>
                            <div class="div-01">
                                <a href=""><img src="img/img-01.jpg" alt=""></a>
                            </div>
                            <div class="div-02">
                                <h3>飙升榜</h3>
                                <a href="javascript:;"></a>
                                <a href="javascript:;"></a>
                            </div>
                        </dt>
                        <dd>
                            <ol>
                                <li>
                                    <span style="color: red">1</span>
                                    <a href="#">苦茶 (心动版)</a>
                                    <div>
                                        <a href="" title="播放"></a>
                                        <a href="" title="添加到播放列表"></a>
                                        <a href="" title="收藏"></a>
                                    </div>
                                </li>
                                <li>
                                    <span style="color: red">2</span>
                                    <a href="#">危险派对</a>
                                    <div>
                                        <a href="" title="播放"></a>
                                        <a href="" title="添加到播放列表"></a>
                                        <a href="" title="收藏"></a>
                                    </div>
                                </li>
                                <li>
                                    <span style="color: red">3</span>
                                    <a href="#">如果呢（女声版</a>
                                    <div>
                                        <a href="" title="播放"></a>
                                        <a href="" title="添加到播放列表"></a>
                                        <a href="" title="收藏"></a>
                                    </div>
                                </li>
                                <li>
                                    <span style="color: #333">4</span>
                                    <a href="#">心跳的证明</a>
                                    <div>
                                        <a href="" title="播放"></a>
                                        <a href="" title="添加到播放列表"></a>
                                        <a href="" title="收藏"></a>
                                    </div>
                                </li>
                                <li>
                                    <span style="color: #333">5</span>
                                    <a href="#">Last One Standing</a>
                                    <div>
                                        <a href="" title="播放"></a>
                                        <a href="" title="添加到播放列表"></a>
                                        <a href="" title="收藏"></a>
                                    </div>
                                </li>
                                <li>
                                    <span style="color: #333">6</span>
                                    <a href="#">Room</a>
                                    <div>
                                        <a href="" title="播放"></a>
                                        <a href="" title="添加到播放列表"></a>
                                        <a href="" title="收藏"></a>
                                    </div>
                                </li>
                                <li>
                                    <span style="color: #333">7</span>
                                    <a href="#">城市逃离计划</a>
                                    <div>
                                        <a href="" title="播放"></a>
                                        <a href="" title="添加到播放列表"></a>
                                        <a href="" title="收藏"></a>
                                    </div>
                                </li>
                                <li>
                                    <span style="color: #333">8</span>
                                    <a href="#">哪里都是你</a>
                                    <div>
                                        <a href="" title="播放"></a>
                                        <a href="" title="添加到播放列表"></a>
                                        <a href="" title="收藏"></a>
                                    </div>
                                </li>
                                <li>
                                    <span style="color: #333">9</span>
                                    <a href="#">红 利 群</a>
                                    <div>
                                        <a href="" title="播放"></a>
                                        <a href="" title="添加到播放列表"></a>
                                        <a href="" title="收藏"></a>
                                    </div>
                                </li>
                                <li>
                                    <span style="color: #333">10</span>
                                    <a href="#">放假之歌</a>
                                    <div>
                                        <a href="" title="播放"></a>
                                        <a href="" title="添加到播放列表"></a>
                                        <a href="" title="收藏"></a>
                                    </div>
                                </li>
                                <li class="the_last">
                                    <a href="#">查看全部></a>
                                </li>
                            </ol>
                        </dd>
                    </dl>
                    <dl>
                        <dt>
                            <div class="div-01">
                                <a href=""><img src="img/img-02.jpg" alt=""></a>
                            </div>
                            <div class="div-02">
                                <h3>新歌榜</h3>
                                <a href="javascript:;"></a>
                                <a href="javascript:;"></a>
                            </div>
                        </dt>
                        <dd>
                            <ol>
                                <li>
                                    <span style="color: red">1</span>
                                    <a href="#">以爱为囚</a>
                                    <div>
                                        <a href="" title="播放"></a>
                                        <a href="" title="添加到播放列表"></a>
                                        <a href="" title="收藏"></a>
                                    </div>
                                </li>
                                <li>
                                    <span style="color: red">2</span>
                                    <a href="#">假面舞会</a>
                                    <div>
                                        <a href="" title="播放"></a>
                                        <a href="" title="添加到播放列表"></a>
                                        <a href="" title="收藏"></a>
                                    </div>
                                </li>
                                <li>
                                    <span style="color: red">3</span>
                                    <a href="#">死性不改</a>
                                    <div>
                                        <a href="" title="播放"></a>
                                        <a href="" title="添加到播放列表"></a>
                                        <a href="" title="收藏"></a>
                                    </div>
                                </li>
                                <li>
                                    <span style="color: #333">4</span>
                                    <a href="#">有谱 (Live)</a>
                                    <div>
                                        <a href="" title="播放"></a>
                                        <a href="" title="添加到播放列表"></a>
                                        <a href="" title="收藏"></a>
                                    </div>
                                </li>
                                <li>
                                    <span style="color: #333">5</span>
                                    <a href="#">苦茶 (心动版)</a>
                                    <div>
                                        <a href="" title="播放"></a>
                                        <a href="" title="添加到播放列表"></a>
                                        <a href="" title="收藏"></a>
                                    </div>
                                </li>
                                <li>
                                    <span style="color: #333">6</span>
                                    <a href="#">危险派对</a>
                                    <div>
                                        <a href="" title="播放"></a>
                                        <a href="" title="添加到播放列表"></a>
                                        <a href="" title="收藏"></a>
                                    </div>
                                </li>
                                <li>
                                    <span style="color: #333">7</span>
                                    <a href="#">心跳的证明</a>
                                    <div>
                                        <a href="" title="播放"></a>
                                        <a href="" title="添加到播放列表"></a>
                                        <a href="" title="收藏"></a>
                                    </div>
                                </li>
                                <li>
                                    <span style="color: #333">8</span>
                                    <a href="#">SAD</a>
                                    <div>
                                        <a href="" title="播放"></a>
                                        <a href="" title="添加到播放列表"></a>
                                        <a href="" title="收藏"></a>
                                    </div>
                                </li>
                                <li>
                                    <span style="color: #333">9</span>
                                    <a href="#">山川</a>
                                    <div>
                                        <a href="" title="播放"></a>
                                        <a href="" title="添加到播放列表"></a>
                                        <a href="" title="收藏"></a>
                                    </div>
                                </li>
                                <li>
                                    <span style="color: #333">10</span>
                                    <a href="#">定格</a>
                                    <div>
                                        <a href="" title="播放"></a>
                                        <a href="" title="添加到播放列表"></a>
                                        <a href="" title="收藏"></a>
                                    </div>
                                </li>
                                <li class="the_last">
                                    <a href="#">查看全部></a>
                                </li>
                            </ol>
                        </dd>
                    </dl>
                    <dl>
                        <dt>
                            <div class="div-01">
                                <a href=""><img src="img/img-03.jpg" alt=""></a>
                            </div>
                            <div class="div-02">
                                <h3>原创榜</h3>
                                <a href="javascript:;"></a>
                                <a href="javascript:;"></a>
                            </div>
                        </dt>
                        <dd>
                            <ol>
                                <li>
                                    <span style="color: red">1</span>
                                    <a href="#">瓮</a>
                                    <div>
                                        <a href="" title="播放"></a>
                                        <a href="" title="添加到播放列表"></a>
                                        <a href="" title="收藏"></a>
                                    </div>
                                </li>
                                <li>
                                    <span style="color: red">2</span>
                                    <a href="#">时间过客</a>
                                    <div>
                                        <a href="" title="播放"></a>
                                        <a href="" title="添加到播放列表"></a>
                                        <a href="" title="收藏"></a>
                                    </div>
                                </li>
                                <li>
                                    <span style="color: red">3</span>
                                    <a href="#">台本</a>
                                    <div>
                                        <a href="" title="播放"></a>
                                        <a href="" title="添加到播放列表"></a>
                                        <a href="" title="收藏"></a>
                                    </div>
                                </li>
                                <li>
                                    <span style="color: #333">4</span>
                                    <a href="#">水调歌头·游览</a>
                                    <div>
                                        <a href="" title="播放"></a>
                                        <a href="" title="添加到播放列表"></a>
                                        <a href="" title="收藏"></a>
                                    </div>
                                </li>
                                <li>
                                    <span style="color: #333">5</span>
                                    <a href="#">以爱为囚</a>
                                    <div>
                                        <a href="" title="播放"></a>
                                        <a href="" title="添加到播放列表"></a>
                                        <a href="" title="收藏"></a>
                                    </div>
                                </li>
                                <li>
                                    <span style="color: #333">6</span>
                                    <a href="#">和光同春</a>
                                    <div>
                                        <a href="" title="播放"></a>
                                        <a href="" title="添加到播放列表"></a>
                                        <a href="" title="收藏"></a>
                                    </div>
                                </li>
                                <li>
                                    <span style="color: #333">7</span>
                                    <a href="#">With U</a>
                                    <div>
                                        <a href="" title="播放"></a>
                                        <a href="" title="添加到播放列表"></a>
                                        <a href="" title="收藏"></a>
                                    </div>
                                </li>
                                <li>
                                    <span style="color: #333">8</span>
                                    <a href="#">辗转反侧</a>
                                    <div>
                                        <a href="" title="播放"></a>
                                        <a href="" title="添加到播放列表"></a>
                                        <a href="" title="收藏"></a>
                                    </div>
                                </li>
                                <li>
                                    <span style="color: #333">9</span>
                                    <a href="#">厌倦</a>
                                    <div>
                                        <a href="" title="播放"></a>
                                        <a href="" title="添加到播放列表"></a>
                                        <a href="" title="收藏"></a>
                                    </div>
                                </li>
                                <li>
                                    <span style="color: #333">10</span>
                                    <a href="#">Violet</a>
                                    <div>
                                        <a href="" title="播放"></a>
                                        <a href="" title="添加到播放列表"></a>
                                        <a href="" title="收藏"></a>
                                    </div>
                                </li>
                                <li class="the_last">
                                    <a href="#">查看全部></a>
                                </li>
                            </ol>
                        </dd>
                    </dl>
                </div>
            </div>
        </div>
        <div class="main-right">
            <div class="main-right-login">
                <p>登录网易云音乐，可以享受无限收藏的乐趣，并且无限同步到手机</p>
                <button>用户登录</button>
            </div>
            <div class="main-right-residentSinger">
                <h3>
                    <span>入驻歌手</span>
                    <a href="#">查看全部 &gt;</a>
                </h3>
                <ul>
                    <li>
                        <a href="">
                            <div class="residentSinger-left">
                                <img src="img/singer01.jpg" alt="张惠妹">
                            </div>
                            <div class="residentSinger-right">
                                <h4>张惠妹aMEI</h4>
                                <p>台湾歌手张惠妹</p>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <div class="residentSinger-left">
                                <img src="img/singer02.jpg" alt="张惠妹">
                            </div>
                            <div class="residentSinger-right">
                                <h4>Fine乐团</h4>
                                <p>独立音乐人</p>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <div class="residentSinger-left">
                                <img src="img/singer03.jpg" alt="张惠妹">
                            </div>
                            <div class="residentSinger-right">
                                <h4>萬曉利</h4>
                                <p>民谣歌手、中国现代民谣的代表人物之一</p>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <div class="residentSinger-left">
                                <img src="img/singer04.jpg" alt="张惠妹">
                            </div>
                            <div class="residentSinger-right">
                                <h4>音乐人赵雷</h4>
                                <p>民谣歌手</p>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <div class="residentSinger-left">
                                <img src="img/singer05.jpg" alt="张惠妹">
                            </div>
                            <div class="residentSinger-right">
                                <h4>王三溥</h4>
                                <p>音乐人</p>
                            </div>
                        </a>
                    </li>
                </ul>
                <button>申请成为网易云音乐人</button>
            </div>
            <div class="main-right-popularAnchors">
                <h3><span>热门主播</span></h3>
                <ul>
                    <li>
                        <a href="">
                            <div class="popularAnchors-left">
                                <img src="img/anchors01.jpg" alt="">
                            </div>
                            <div class="popularAnchors-right">
                                <h4>陈立</h4>
                                <p>心理学家、美食家陈立教授</p>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <div class="popularAnchors-left">
                                <img src="img/anchors02.jpg" alt="">
                            </div>
                            <div class="popularAnchors-right">
                                <h4>刘维-Julius</h4>
                                <p>歌手、播客节目《维维道来》主理人</p>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <div class="popularAnchors-left">
                                <img src="img/anchors03.jpg" alt="">
                            </div>
                            <div class="popularAnchors-right">
                                <h4>莫非定律MoreFeel</h4>
                                <p>男女双人全创作独立乐团</p>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <div class="popularAnchors-left">
                                <img src="img/anchors04.jpg" alt="">
                            </div>
                            <div class="popularAnchors-right">
                                <h4>碎嘴许美达</h4>
                                <p>脱口秀网络红人</p>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <div class="popularAnchors-left">
                                <img src="img/anchors05.jpg" alt="">
                            </div>
                            <div class="popularAnchors-right">
                                <h4>银临Rachel</h4>
                                <p>古风音乐人</p>
                            </div>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

<!--底部-->
<div class="page_bottom">
    <div class="w">
        <div class="page_bottom-box">
            <div class="page_bottom-box-left">
                <p>服务条款 | 隐私政策 | 儿童隐私政策 | 版权投诉指引 | 意见反馈 | 广告合作</p>
                <p>网易公司版权所有©1997-2021杭州乐读科技有限公司运营：浙网文[2021] 1186-054号</p>
                <p>违法和不良信息举报电话：0571-89853516 举报邮箱：ncm5990@163.com</p>
                <p>粤B2-20090191-18  工业和信息化部备案管理系统网站  浙公网安备 33010902002564号</p>
            </div>
            <div class="page_bottom-box-right">
                <ul>
                    <li>
                        <a href=""></a>
                        <p></p>
                    </li>
                    <li>
                        <a href=""></a>
                        <p></p>
                    </li>
                    <li>
                        <a href=""></a>
                        <p></p>
                    </li>
                    <li>
                        <a href=""></a>
                        <p></p>
                    </li>
                    <li>
                        <a href=""></a>
                        <p></p>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

<div class="to_top">
    返回顶部
</div>

</body>
<script src="js/index.js"></script>
</html>